<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option =  {
    title: {
      text: '数据分析',
      top: '6%',
      left: '5%',
      textStyle: {
        fontWeight: 500
      }
    },
    legend: {
      top: '12%',
      right: '10%',
      icon: 'square',
      data: [
        '销售数据',
        '运营数据'
      ],
      formatter: function (name) {
        const sum = 1000
        if (name === '家具种类占比') {
          const percentage = ((568 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        } else {
          const percentage = ((432 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        }
      },
      textStyle: {
        rich: {
          a: {
            color: '#878787',
            fontWeight: '400',
            fontSize: 12
          },
          b: {
            color: '#000000',
            fontWeight: '300',
            fontSize: 18,
            lineHeight: 40
          }
        }
      }
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '30%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisPointer: {
          show: false,
          type: 'line',
          // handle: {
          //   show: false,
          //   size: 0
          //   // icon: ''
          // },
          lineStyle: {
            type: 'solid',
            color: '#a5b8ff',
            width: 3
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#a585cf'
        },
        nameTextStyle: {
          color: '#ffffff'
        },
        axisLine: {
          show: false
        },
        data: ['8', '9', '10', '11', '12', '13', '14']
      }
    ],
    yAxis: [
      {
        type: 'value',
        max: 80,
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: '销售数据',
        type: 'line',
        color: '#f2fbff',
        showSymbol: false,
        symbolSize: 10,
        lineStyle: {
          width: 2,
          color: '#ffb300'
        },
        // symbolSize: 10,
        // stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [55, 45, 50, 35, 54, 48, 60]
      },
      {
        name: '运营数据',
        type: 'line',
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#f56600'
        },
        // stack: 'Total',
        color: '#f9f6ff',
        symbolSize: 10,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [45, 31, 45, 25, 32, 33, 31]
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 48%; height: 400px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
